<template>
    <div class="warehouse">
        <div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline" >
                <div style="text-align: left">
                    <el-form-item label="商品名称:">
                        <el-input v-model="formInline.goodsName" placeholder="商品名称" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="库存:">
                        <el-input v-model="formInline.goodsStock" placeholder="库存" size="small"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button type="" @click="clear" >清空</el-button>
                    </el-form-item>
                    <div>
                    <el-form-item label="状态:">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <div class="block">
                            <el-date-picker
                                    size="small"
                                    v-model="valueTime"
                                    type="daterange"
                                    align="right"
                                    unlink-panels
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    </div>
                </div>
            </el-form>
        </div>
<!--        列表-->

        <template>
            <el-table
                    ref="multipleTable"
                    :data="tableShow"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop=""
                        label="商品信息"
                        width="240">
                    <template  slot-scope="scope">
                        <el-image :src="'/api/upload/'+scope.row.goodsImg" style="vertical-align: middle ;width: 60px; height: 50px;" ></el-image>
                        <span>{{scope.row.goodsName}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="goodsStandard"
                        label="规格"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="goodsPrice"
                        label="价格"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="goodsStock"
                        label="库存"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="goodsStatus"
                        label="状态"
                        width="120">
                </el-table-column>
                <el-table-column
                        label="入库时间"
                        width="200">
                    <template slot-scope="scope">{{ scope.row.goodsCreateTime }}</template>
                </el-table-column>

                <el-table-column
                        label="操作"
                        show-overflow-tooltip>
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                </el-table-column>
            </el-table>
<!--            分页-->
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-size="pageSize"
                        layout="total, prev, pager, next"
                        :total="count">
                </el-pagination>
            </div>
        </template>
    </div>
</template>

<script>
    export default {
        name: "goodsStore",
        data(){
            return{
                formInline:{
                    goodsName:'',
                    goodsStock:'',
                },
                options: [{
                    value: '0',
                    label: '未上架'
                }, {
                    value: '1',
                    label: '已上架'
                }],
                value: '',
                pageSize:3,

                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                valueTime: '',
                tableData: [],
                tableShow:[],
                count:"",
                currentPage:1,
                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 4
            }
        },
        methods:{
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                var goodsName=this.formInline.goodsName
                var goodsStock=this.formInline.goodsStock
                var goodsStatus=this.value
                console.log(this.valueTime)
                if (this.valueTime!=''){
                    var goodsCreateTime=this.dateFormat(this.valueTime[0])+" 00:00:00"
                    var goodsEndTime=this.dateFormat(this.valueTime[1])+" 00:00:00"
                }else {
                    var goodsCreateTime=''
                    var goodsEndTime=''
                }
                this.$axios.post('/api/goods/list',{page:val,goodsName,goodsStock,goodsStatus ,goodsCreateTime,goodsEndTime}).then(res=>{

                    if (res.data.code==200){
                        this.tableShow=res.data.data
                        console.log(this.tableShow)
                        this.tableShow.forEach((item,index)=>{
                            if (item.goodsStatus==0){
                                item.goodsStatus='未上架'
                            }else if (item.goodsStatus==1){
                                item.goodsStatus='已上架'
                            }
                        })

                    }
                })
            },
            dateFormat(dateData) {
                var date = new Date(dateData)
                var y = date.getFullYear()
                var m = date.getMonth() + 1
                m = m < 10 ? ('0' + m) : m
                var d = date.getDate()
                d = d < 10 ? ('0' + d) : d
                const time = y + '-' + m + '-' + d
                return time
            },

            onSubmit(){
                var goodsName=this.formInline.goodsName
                var goodsStock=this.formInline.goodsStock
                var goodsStatus=this.value
                console.log(this.valueTime)
                if (this.valueTime!=''){
                    var goodsCreateTime=this.dateFormat(this.valueTime[0])+" 00:00:00"
                    var goodsEndTime=this.dateFormat(this.valueTime[1])+" 00:00:00"
                }else {
                    var goodsCreateTime=''
                    var goodsEndTime=''
                }

                console.log(goodsStatus)
                console.log(goodsEndTime)
               this.$axios.post('/api/goods/list',{goodsName,goodsStock,goodsStatus ,goodsCreateTime,goodsEndTime}).then(res=>[
                   console.log(res),
                   this.count=res.data.count,
                   this.tableShow=res.data.data,
                   this.tableShow.forEach((item,index)=>{
                       if (item.goodsStatus==0){
                           item.goodsStatus='未上架'
                       }else if (item.goodsStatus==1){
                           item.goodsStatus='已上架'
                       }
                   })

               ])
            },
            clear(){
                this.formInline.goodsName=''
                this.formInline.goodsStock=''
                this.value=''
                this.valueTime=''
                this.handleCurrentChange(1)
                this.loadList()

            },
            loadList(){
                this.$axios.post('/api/goods/list',{}).then((res)=>{

                    if (res.data.code==200){
                        this.tableData=res.data.data
                        console.log(res.data)
                        this.count=res.data.count
                    }
                    this.handleCurrentChange(1)
                })
            }

        },
        mounted() {
          this.loadList()

        }
    }
</script>

<style scoped>

</style>